<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>全部商品</el-breadcrumb-item>
      <el-breadcrumb-item>分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- tab切换 -->
    <div class="box">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          :label="item.category_name"
          v-for="(item, index) in tabslist"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <ul class="goods_ul">
      <li v-for="(item, index) in goodslist" :key="index" class="li">
        <img :src="`http://101.132.181.9/api/${item.product_picture}`" alt="" />
        <p class="s1">{{ item.product_name }}</p>
        <p class="s1">{{ item.product_title }}</p>
        <span class="s1" style="color: red">{{ item.product_price }}元</span>
        <s class="s2">{{ item.product_selling_price }}</s>
      </li>
    </ul>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.currentPage"
      :page-size="queryinfo.pageSize"
      layout=" prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { tablist, allslist, getgoodstab, searchlist } from "../../utils/api";
export default {
  data() {
    return {
      tabslist: [], //tab数据
      goodslist: [], //所有的数据
      activeName: "",
      label: "",
      queryinfo: {
        currentPage: 1,
        pageSize: 15,
        search: "",
      },
      total: 0,
    };
  },

 async mounted() {
    this.gettabs();
    this.getalllist();
    // 搜索
    this.queryinfo.search = this.$route.query.value;
    var obj = this.queryinfo;
    console.log(2222222,obj);
    var res = await searchlist( obj);
    console.log(1111111111, res);
    this.goodslist=res.data.Product
  },
  beforeRouteUpdate(to, from, next) {
    this.queryinfo.search = to.query.value;
    var obj = this.queryinfo;
    console.log(obj);
    searchlist(obj).then((res) => {
      console.log(res);
      this.goodslist = res.data.Product;
    });
  },

  methods: {
    // 请求tab栏所有数据
    async gettabs() {
      var res = await tablist();
      this.tabslist = res.data.category;
      this.tabslist.unshift({ id: "0", category_name: "全部" });
    },

    async handleClick(tab, event) {
      this.label = tab.label;
      // 当label等于全部的时候 渲染的是全部数据
      if (this.label == "全部") {
        this.getalllist();
      } else {
        // getgoodstab 点击tab切换对应的商品信息
        var res = await getgoodstab(this.label);
        console.log(777, res);
        this.goodslist = res.data.Product;
      }
    },
    // 请求所有的数据
    async getalllist() {
      var res = await allslist(this.queryinfo);
      console.log(999, res);
      this.goodslist = res.data.Product;
      this.total = res.data.total;
    },
    // 分页
    handleSizeChange() {
      this.queryinfo.pageSize = 15;
      this.getalllist();
    },
    handleCurrentChange(val) {
      this.queryinfo.currentPage = val;
      this.getalllist();
    },
  },
};
</script>
<style lang="scss">
.box {
  position: relative;
  height: 80px;
}

.goods_ul {
  width: 1200px;
  display: flex;
  flex-direction: row;
  margin: 10px 40px;
  flex-wrap: wrap;
  background: #fff;
  .li {
    width: 19%;
    height: 300px;
    margin-top: 10px;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .li:hover {
    transform: scale(1.01);
    transition: all 0.3s linear;
    box-shadow: 0 0 20px #b0b0b0;
  }
}
</style>